.container
    .product
        img(ng-src="{{mainImg}}")
        //
            img(ng-src="/image/main-product1.jpg" ng-if="showCarve")
            canvas#carve(ng-if="showCarve" width="240px" height="80px") 
        .content
            .col-33.active#content(ng-click="moveToContent()" ng-class="{'active':content}") 定制内容
            .col-33#size(ng-click="moveToSize()" ng-class="{'active':size}" ng-show="needRingSize") 戒围
            .clear
        .soundHelp
            p(ng-click="openContentHelp()") 帮助
    .swiper-container.product-tab
        .swiper-wrapper
            .swiper-slide.swiper-no-swiping
                .recorder
                    div(ng-show="!isWeixin")
                        #timeline
                            img(ng-src="/image/newTimeline.jpg")
                            #line(ng-class="{'line':tip == 'recording'}")
                            div(ng-switch='tip')
                                p.text-center.tip(ng-switch-when="intro") 按住录音键，倒计时结束后开始录音
                                p.text-center.tip(ng-switch-when="countdown") 倒计时结束后开始录音<br/>{{timeoutNumber}}
                                p.text-center.tip(ng-switch-when="warning") 请尝试离话筒近一些
                                p.text-center.tip(ng-switch-when="recording") {{recordingTip}}
                                p.text-center.tip(ng-switch-when="analysing") 正在解析音频数据...
                                p.text-center.tip(ng-switch-when="tooshort") 请尝试多录制一些
                                p.text-center.tip(ng-switch-when="uploading") 上传中...
                            canvas#wave-form(width="720px" height="240px" ng-show="tip == 'wave'")

                            .leftBtn(ng-click="oldRecord();" ng-class="{'moreRecorder':isNewRecord && oldExist}")
                            .rightBtn(ng-click="newRecord();" ng-class="{'moreRecorder':!isNewRecord && oldExist}")
                            .text-center
                                p 支持5S内声音录制
                        .row.btn.row-bottom.clearfix

                            .col-50
                                button.recorder-button.recorderSound(ng-class="{'recorderPress':recorderPress, 'disabled':!ready}")
                                p 录音
                            .col-50
                                button.playSound(ng-click="playRecord();" ng-class="{'playPress':playPress}")
                                p 播放
                    .weixin(ng-if="isWeixin")
                        p 如何定制<br/>How to customize
                        img(ng-src="//cdn.m-lab.cn/_pc/common/how_to_made4.jpg")
                        p 请在微信中声音定制
            .swiper-slide.swiper-no-swiping(ng-show="needRingSize")
                .size
                    p 尺寸选择
                    select(
                        name="size"
                        ng-model="ringSize"
                        ng-change="setSize();"
                        ng-options="opt.value as opt.title for opt in ringSizeData")
    .main-btn.text-center
        button(ng-click="confirm();") {{confirmBtn}}
    .step1.step.text-center#step1
        .swiper-container.content-info
            .swiper-wrapper
                .swiper-slide
                    .slideClose(ng-click="closeInfo()")
                    p.state 1.<br/>
                        span 按住录音键，倒数3秒开始录制
                    .stepRecoder
                        .stepRecoderImg
                        p.stepRecoderText 按住录音
                    .slideBtn
                        p(ng-click="closeInfo()") 跳过
                        p(ng-click="nextSlide()") 下一步
                .swiper-slide
                    .slideClose(ng-click="closeInfo()")
                    p.state 2.<br/>
                        span 声波形状对应您录制的语音
                    .stepSoundwave
                        img(ng-src="/image/soundwave.png")
                    .slideBtn
                        p(ng-click="closeInfo()") 跳过
                        p(ng-click="nextSlide()") 下一步
                .swiper-slide
                    .slideClose(ng-click="closeInfo()")
                    p.state 3.<br/>
                        span 点击播放您录制的语音
                    .stepPlay
                        .stepPlayImg
                        p.stepPlayText 播放
                    .slideBtn
                        p(ng-click="closeInfo()") 跳过
                        p(ng-click="nextSlide()") 下一步
                .swiper-slide
                    .slideClose(ng-click="closeInfo()")
                    p.state 4.<br/>
                        span 点击左侧按钮查看前一段语音
                    .stepLeft
                    .slideBtn
                        p(ng-click="closeInfo()") 跳过
                        p(ng-click="nextSlide()") 下一步
                .swiper-slide
                    .slideClose(ng-click="closeInfo()")
                    p.state 5.<br/>
                        span 点击右侧按钮查看最新语音
                    .stepRight
                    .slideBtn.clearfix
                        p(ng-click="closeInfo()") 结束
                        p(ng-click="closeInfo()") 开始录音
    .step2.step.text-center#step2
        .slideClose(ng-click="closeInfo()")
        p 1.按住录音键，倒数3秒开始录制
        p 2.声波形状对应您录制的语音
        p 3.点击播放您录制的语音
        p 4.点击左侧按钮查看前一段语音
        p 5.点击右侧按钮查看最新语音
        .stepRecoder
            .stepRecoderImg
            p.stepRecoderText 1.
        .stepSoundwave
            p.soundwaveNumber 2.
            img(ng-src="/image/soundwave.png")
        .stepPlay
            .stepPlayImg
            p.stepPlayText 3.
        .stepLeft
            p.leftNumber 4.
        .stepRight
            p.rightNumber 5.
    .step3.step.text-center#step3
        p.title 请输入收货人手机号
        input.phone-input(ng-model="phone.input")
        button.phone-btn(ng-click="getPhone()") 确定


